/**
 * @author 14544
 * @date 2020/4/16 15:39
 */
window.onload = function () {

    const myFileEle = document.querySelector('.myFile');
    const submitEle = document.querySelector('.submit');
    let files = null;

    myFileEle.addEventListener('change', function () {
        files = this.files;
        console.log(files)
        // fileReaderToImg()
        urlObjToImg()
    }, false)


    submitEle.addEventListener('click', function () {
        if(myFileEle && myFileEle.style.display==='none') {
            myFileEle.click()  // 手动调用click方法来选择文件
        }
    })

    // 使用FileReader展示所选图片的缩略图
    function fileReaderToImg() {
        console.log('fileReaderToImg')
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            // 如果是图片
            if (!file.type.match(/^image\/(.+)/)) continue;
            let img = new Image();
            img.file = file;
            document.body.appendChild(img);
            let fileReader = new FileReader();
            // 使用闭包，防止img参数引用错误
            fileReader.onload = (function(aImg){
               return function (event) {
                   // 返回一个data:URL
                   aImg.src = event.target.result;
                }
            })(img)
            fileReader.readAsDataURL(file)
        }
    }

    //  使用对象 URL展示所选图片的缩略图
    function urlObjToImg() {
        console.log('urlObjToImg')
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            // 如果是video
            if (file.type.match(/^video\/(.+)/)) {
                urlObjToVideo(file);
                continue;
            }
            // 如果是pdf
            if (file.type === 'application/pdf') {
                urlObjToPdf(file);
                continue;
            }
            // 如果是图片
            if (!file.type.match(/^image\/(.+)/)) continue;
            let img = document.createElement('img');
            //  使用URL静态方法createObjectURL，创建指向本地file或者blob对象的url字符串
            img.src = (window.URL || window.webkitURL).createObjectURL(file);
            img.onload = function(){
                // createObjectURL 会产生一个唯一的对象URL，即使是你对一个已创建了对象URL的文件再次创建一个对象URL。
                // 每个创建了的对象URL必须要释放。当文档关闭时，它们会自动被释放。如果你的网页要动态使用它们，你需要显式调用 window.URL.revokeObjectURL()来释放它们：
                window.URL.revokeObjectURL(img.src) // 防止内存泄漏
            }
            document.body.appendChild(img);
        }
    }

    // 使用对象URl结合iframe展示PDF文件
    function urlObjToPdf(pdfFile) {
        let iframe = document.createElement('iframe');
        let obj_url = window.URL.createObjectURL(pdfFile);
        iframe.src = obj_url;
        document.body.appendChild(iframe)
        window.URL.revokeObjectURL(obj_url)
    }

    // 使用对象URl结合iframe展示video文件
    function urlObjToVideo(videoFile) {
        let iframe = document.createElement('iframe');
        let obj_url = window.URL.createObjectURL(videoFile);
        iframe.src = obj_url;
        document.body.appendChild(iframe)
        window.URL.revokeObjectURL(obj_url)
    }
}
